<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Root</title>

  <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">

  <style>
    * {
      padding: 0;
      margin: 0;
    }

    input {

      border: none;
      background-color: transparent;
      outline: none;
    }

    body,
    html {
      width: 100%;
      height: 100%;
    }

    .search {
      display: flex;
      align-items: center;
      height: 40px;


    }

    .submit {
      width: 65px;
      height: 30px;
      background-color: skyblue;

      margin-left: 10px;
    }

    .searchInput {
      height: 30px;
    }

    .tableBox {
      margin-top: 40px;
    }

    .pageChange {
      cursor: pointer;
      user-select: none;
    }

    .mask {
      position: absolute;
      top: 0;
      left: 0;

      width: 100%;
      height: 100%;

      background-color: rgba(0, 0, 0, 0.4);
    }

    .box {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 400px;
      height: 600px;
      background-color: white;

      box-sizing: border-box;
      padding: 20px 20px 20px 20px;
    }

    .msgInput {
      border: 1px solid rgb(220, 220, 220);

      width: 302px;
      height: 40px;
      box-sizing: border-box;
      padding-left: 10px;
    }


    .submit {
      border: 0;
      width: 100px;
      height: 40px;
      background-color: skyblue;
      color: white;
      font-weight: bold;
    }
  </style>
</head>

<body>
  <div id="app">
    <div class="mask" v-if="showMask">
      <div class="box">
        <p>姓名</p>
        <input type="text" class="msgInput">

        <p>密码</p>
        <input type="text" class="msgInput">

        <p>QQ邮箱</p>
        <input type="text" class="msgInput">

        <p>手机号</p>
        <input type="text" class="msgInput">

        <p>性别</p>

        <textarea cols="30" rows="5"></textarea>

        <p>职业</p>
        <input type="file" class="msgInput" style="border: 0;">

        <button class="submit">提交</button>
        <button class="submit" @click="hiddenMask">取消</button>
      </div>
    </div>



    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">
            <img alt="" src="./image/logo.png" style="width: 100%;height: 100%;">
          </a>
          <p class="navbar-text" style="font-size: 15px;">Indenture</p>
        </div>
      </div>
    </nav>

    <div style="padding: 20px;">
      <div class="search">
        <input type="text" class="searchInput">
        <button class="submit">搜索</button>
        <button class="submit" @click="tianjia">添加</button>
      </div>

      <div class="tableBox">
        <table class="table table-striped table-bordered">
          <thead>
            <tr class="active">
              <th>用户名</th>
              <th>密码</th>
              <th>QQ邮箱</th>
              <th>手机号</th>
              <th>性别</th>
              <th>职业</th>
            </tr>
          </thead>

          <tbody>
            <tr v-for="(item,i) in userList" :key="i">
              <td>{{item.username}}</td>
              <td>{{item.password}}</td>
              <td>{{item.email}}</td>
              <td>{{item.phone}}</td>
              <td v-if="item.status==1">女</td>
              <td v-else>男</td>
              <td><a href="#" @click="delectUser(item.uid)">删除</a></td>
            </tr>
          </tbody>
          <tfoot>

          </tfoot>
        </table>
      </div>

      <div>
        <a class="pageChange" @click="lastPage">上一页</a> <a class="pageChange" style="margin-left: 15px;"  @click="nextPage">下一页</a> <span
          style="color: rgb(213, 213, 213);font-size: 12px;margin-left: 15px;">当前{{nowPage}}页,总共{{totlePage}}页</span>
      </div>
    </div>
  </div>

  <script src="./JS/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    const vm = new Vue({
      el: '#app',
      created(){
        this.getUserList(1)
      },
      data: {
        showMask: false,
        userList:[],

        totlePage:-1,
        nowPage:1
      },
      methods: {

        delectUser(id){
          axios({
            method: "post",
            url:'/Indenture/user/delete',
            data: {
              id
            },
          }).then((res)=>{
            this.getUserList(1)
          })
        },
        lastPage(){
          if(this.nowPage!=1){
            this.nowPage--
            this.getUserList(this.nowPage)
          }
        },
        nextPage(){
          if(this.nowPage!=this.totlePage){
            this.nowPage++
            this.getUserList(this.nowPage)
          }
        },
        getUserList(pageIndex){
          axios({
            method: 'post',
            url: '/Indenture/userList',
            data: {
              pageIndex
            }
          }).then((res) => {
              console.log(res.data)
              this.userList = res.data.userList
              this.totlePage =  res.data.count;
          })
        },
        tianjia() {
          this.showMask = true
        },
        hiddenMask() {
          this.showMask = false
        }
      }
    })
  </script>
</body>

</html>